<template>
    <div class="back">
        <div class="bigS">
            <div class="box" @scroll="scrollEvent">
                <div class="ps">
                    <p>考试须知</p>
                </div>
                <div class="big">
                    <EnglishFor />
                </div>
            </div>
            <div class="btn">
                <input type="checkbox" id="pitch" :disabled="agreementChang" @click="variation">
                <label for="pitch">我同意</label>
                <button :disabled="condition" @click="again">点击开始考试</button>
                <b>{{ seconds }} </b>
            </div>
        </div>
    </div>
</template>

<script>
import EnglishFor from '../../components/EnglishFor/EnglishFor.vue'
export default {
    name: "",
    components: {
        EnglishFor
    },
    data() {
        return {
            count: 3,
            condition: true,
            agreementChang: true,
            seconds: 3,
        }
    },
    created() {
    },
    mounted(){
        this.Time()
    },
    methods: {
        // scrollEvent(e) {
        //     if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
        //         this.timer = setInterval(() => {
        //             this.count--
        //             if (this.count === 0) {
        //                 clearInterval(this.timer)
        //                 this.agreementChang = false
        //             }
        //         }, 1000)
        //     }
        // },

        //定时器每过1秒参数减1
        Time() {
            this.Time = setInterval(() => {
                this.seconds -= 1
                if (this.seconds === 0) {
                    clearInterval(this.Time)
                    this.agreementChang = false
                    this.seconds=null
                }
            }, 1000)
        },

        variation() {
            this.condition = !this.condition
        },
        again() {
            location.replace("/exam");
        },
    },
}
</script>
<style scoped lang="scss">
* {
    padding: 0px;
    margin: 0px;
}

.back {
    background-image: url(../../assets/15.png);
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
}

.bigS {
    margin-top: 50vh;
    transform: translateY(-50%);

    .box {
        height: 580px;
        width: 520px;
        border: 3px solid black;
        margin: 0 auto;
        position: relative;
        overflow-y: scroll;
        background-color: #fafafa;

        .ps {
            position: sticky;
            top: 0px;
            border-bottom: 1px solid #ccc;
            background-color: white;

            p {
                text-align: center;
                margin-top: 5px;
                font-size: 18px;
                line-height: 60px;
            }
        }

        .big {
            border: none;
            width: 100%;
            border-top: 1px solid #ccc;
        }
    }


    .btn {
        width: 400px;
        margin-top: 20px;
        height: 35px;
        text-align: center;
        margin-left: 50vw;
        transform: translateX(-50%);

        button {
            height: 35px;
            padding: 5px;
            text-align: center;
            border: none;
            margin-left: 50px;
            margin-right: 10px;
            background-color: #d9d9d9;
            border-radius: 10px;
        }
    }
}
</style>